<template>
  <view class="content">
    <view class="msg">{{ msgInfo.content || "" }}</view>
    <textarea :value="msg" @input="(e) => (msg = e.detail.value)" class="input" placeholder="请输入回复内容"></textarea>
    <button class="btn" @click="send">
      {{ userInfo.type === "student" ? "发送" : "回复" }}
    </button>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { sendMessage, messagesInfo, addReply } from "@/api";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useMessageStore } from "@/store/index";

const msg = ref("");
const msgInfo = ref({});
const userInfo = ref({});
const { messageType } = useMessageStore();

const send = () => {
  userInfo.value = uni.getStorageSync("userInfo");
  if (!msg.value) {
    return uni.showToast({
      title: "请输入回复内容",
      icon: "none",
    });
  }
  const data = {
    recipientOpenid: "o25B061QEL28x2KvT4yBP8_Vh_VE", // 目前先写死
    recipientType: messageType, 
    content: msg.value,
  };
  let handler = sendMessage;
  if (userInfo.value.type !== "student") {
    data.recipient_openid = userInfo.value.openid;
    data.recipientType = userInfo.value.type;
    data.messageId = msgInfo.value?.message_id;
    data.messageType = msgInfo.value.messageType;
    handler = addReply;
  }
  handler(data).then(() => {
    uni.showToast({
      title: "回复成功",
      icon: "none",
    });
    uni.navigateBack();
  });
};

const getMsg = (id) => {
  messagesInfo(id).then((res) => {
    msgInfo.value = res.message;
  });
};

onLoad((options) => {
  options.messageId && getMsg(options.messageId);
});
</script>

<style lang="scss">
.content {
  min-height: 100vh;
  padding: 40rpx;
  box-sizing: border-box;
  .msg {
    font-size: 28rpx;
    color: #000;
    margin-bottom: 80rpx;
  }
  textarea {
    width: 100%;
    height: 250rpx;
    border-radius: 20rpx;
    border: 2rpx solid #dedede;
    margin-bottom: 40rpx;
    padding: 20rpx;
    box-sizing: border-box;
  }
  .btn {
    width: 100%;
    height: 80rpx;
    background: #000;
    color: #fff;
    font-size: 28rpx;
    line-height: 80rpx;
  }
}
</style>
